<template>
	<el-main>
		<!-- <ma-chunk-upload v-model="test" /> -->
		<el-row :gutter="15">
			<el-col :lg="24">
				<el-card shadow="never" header="选择资源组件">
					<sc-upload v-model="avatar" title="选择头像" file-select></sc-upload>

					<sc-upload-multiple
						v-model="imagelist"
						title="多选"
						file-select
					></sc-upload-multiple>

					<sc-file-select v-model="scuiList" style="margin-top: 10px"/>

					<div class="selectResource">
						<p>选择的资源：</p>
						{{ scuiList }}
					</div>
				</el-card>

				<el-card shadow="never" header="二维码组件">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-card shadow="never" header="常用"
							>
								<sc-qr-code text="mineadmin"></sc-qr-code
								>
							</el-card>
						</el-col>
						<el-col :span="8">
							<el-card shadow="never" header="带Logo">
								<sc-qr-code text="mineadmin" :logo="$CONFIG.LOGO"></sc-qr-code>
							</el-card>
						</el-col>
						<el-col :span="8">
							<el-card shadow="never" header="自定义大小和颜色">
								<sc-qr-code
									text="mineadmin"
									:size="100"
									colorDark="#088200"
									colorLight="#fff"
								></sc-qr-code>
							</el-card>
						</el-col>
					</el-row>
				</el-card>
				<el-card shadow="never" header="水印组件">
					<sc-water-mark
						ref="wm"
						text="欢迎体验Grace"
						subtext="www.mineadmin.com"
					>
						<el-table :data="wmData" border stripe style="width: 100%">
							<el-table-column prop="date" label="Date" width="180"/>
							<el-table-column prop="name" label="Name" width="180"/>
							<el-table-column prop="address" label="Address"/>
						</el-table>
					</sc-water-mark>
					<div style="margin-top: 10px">
						<el-button type="primary" @click="$refs.wm.create()"
						>创建水印
						</el-button
						>
						<el-button type="primary" @click="$refs.wm.clear()"
						>移除水印
						</el-button
						>
					</div>
				</el-card>
				<el-card shadow="never" header="选择用户组件">
					<ma-select-user v-model="users"/>
					<div class="selectResource">
						<p>选择的用户：</p>
						{{ users }}
					</div>
				</el-card>

				<el-card shadow="never" header="SCUI视频组件">
					<sc-video
						src="https://hsplay-360.v.btime.com/live_btime/btv_sn_20170706_s4/index.m3u8"
						isLive
					></sc-video>
				</el-card>

				<el-card shadow="never" header="城市联级选择器">
					<el-alert title="返回城市编码" type="warning"/>
					<city-linkage v-model="cityDataCode" valueType="code"/>

					<p>{{ cityDataCode }}</p>

					<el-alert
						title="返回城市名称，并限制层级，只显示省份"
						type="warning"
						class="mt"
					/>
					<city-linkage v-model="cityDataName" valueType="name"/>

					<p class="value">{{ cityDataName }}</p>
				</el-card>

				<el-card shadow="never" header="城市下拉联动选择器">
					<el-alert title="返回城市编码" type="warning"/>
					<three-level-linkage v-model="cityDataCode2" valueType="code"/>
					<p>{{ cityDataCode2 }}</p>

					<el-alert title="返回城市名称" type="warning" class="mt"/>
					<three-level-linkage v-model="cityDataName2" valueType="name"/>
					<p>{{ cityDataName2 }}</p>
				</el-card>

				<el-card shadow="never" header="城市code翻译成城市名称函数">
					<el-alert
						title="codeToCity('省代码', '市代码', '区代码', '分隔符')"
						type="warning"
					/>

					<h2>{{ codeToCity("11", "1101", "110105") }}</h2>
					<h2>{{ codeToCity("11", "1101", "110105", " - ") }}</h2>
					<h2>{{ codeToCity("11", "1101") }}</h2>
					<h2>{{ codeToCity("11") }}</h2>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>
<script>
import cityLinkage from "@/components/maCityLinkage";
import scVideo from "@/components/scVideo";
import threeLevelLinkage from "@/components/maCityLinkage/threeLevelLinkage";

export default {
	name: "demo",

	components: {
		scVideo,
		cityLinkage,
		threeLevelLinkage,
	},

	data() {
		return {
			avatar: "",
			imagelist: "",
			test: 'asdfdsf',
			list: [],
			users: [],
			scuiList: null,
			cityDataCode: [],
			cityDataName: [],
			cityDataCode2: {},
			cityDataName2: {},

			wmData: [
				{
					date: "2016-05-03",
					name: "Tom",
					address: "No. 189, Grove St, Los Angeles",
				},
				{
					date: "2016-05-02",
					name: "Tom",
					address: "No. 189, Grove St, Los Angeles",
				},
				{
					date: "2016-05-04",
					name: "Tom",
					address: "No. 189, Grove St, Los Angeles",
				},
				{
					date: "2016-05-01",
					name: "Tom",
					address: "No. 189, Grove St, Los Angeles",
				},
			],

			qrcode: "mineadmin",
		};
	}
};
</script>

<style scoped>
.mt {
	margin-top: 15px;
}

.selectResource {
	margin: 15px 0;
	font-size: 14px;
	line-height: 25px;
}

.value {
	margin: 15px 0;
}
</style>
